<template>
    <div class="folderDetail">
        <el-form :model="folderDetail" :rules="rules" ref="ruleForm" class="FolderDetail">
            <el-form-item prop="title">
                <el-input class="textStyle" v-model="folderDetail.title" placeholder="文件夹名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input class="textStyle" type="textarea" resize="none" maxlength="1000" show-word-limit
                    placeholder="文件夹备注" v-model="folderDetail.description" :autosize="{ minRows: 20, maxRows: 20}">
                </el-input>
            </el-form-item>
            <el-form-item style="text-align: right;">
                <el-button type="primary" @click="update">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import { mapState } from 'vuex'

    export default {
        props: ['folderValue', 'closeEvent'],
        data() {
            return {
                folderDetail: {
                    title: '',
                    description: '',
                },
                rules: {
                    title: [
                        { required: true, message: '请输入文件夹名称', trigger: 'blur' },
                    ],
                },
            }
        },
        computed: {
            ...mapState("theme", {
                theme: state => state.theme,
            }),
        },
        mounted() {
            this.folderDetail = JSON.parse(JSON.stringify(this.folderValue));
        },
        methods: {
            update() {
                this.$refs.ruleForm.validate(async (valid) => {
                    if (valid) {
                        var confirm = this.$confirm('是否更新文件夹信息？');
                        if (confirm) {
                            // action=>
                            var updateObject = {
                                id: this.folderDetail.id,
                                title: this.folderDetail.title,
                                description: this.folderDetail.description,
                            };
                            window.action.api.updataFolderDetail(updateObject).then((res) => {
                                if (res) {
                                    this.$store.dispatch('Tree/editFolderDetail', updateObject);
                                };
                            });
                        };
                    } else {
                        return false;
                    }
                });
            }
        },
    }
</script>

<style scoped>
    .FolderDetail {
        width: 90%;
        margin: 20px auto;
    }
</style>